<template>
	<view class="main-page" style="padding-bottom: 120rpx;">
		<view class="head-img-container">
			<image src="../../static/index/bg_header_act.png" class="head-img" mode="aspectFill"></image>
			<view class="head-img-shadow"></view>
		</view>
		<view class="title-container">
			<image class="back-ic" src="../../static/common/ic_back_white.png" @click="goBack"></image>
			<text class="font-fff-36" style="font-weight: 600;">活动详情</text>
		</view>
		
		<!-- 活动信息 -->
		<view class="info-box">
			<view class="row-container-row-between" style="width: 100%;">
				<image class="act-img" src="../../static/index/bg_act.png"></image>
				<view class="column-container" style="flex-grow: 1;">
					<view class="row-container-row-between" style="flex-grow: 1;">
						<text class="act-name">老虎斑剁椒鱼头(环宇城店)</text>
						<text class="copy-name">复制</text>
					</view>
					<image class="brand-tag" src="../../static/index/ic_act_tag_meituan.png" mode="heightFix"></image>
					<text class="font-666-24">该店离您：3.9km</text>
				</view>
			</view>
			<view class="row-container-top" style="width: 100%;margin-top: 20rpx;">
				<text class="font-333-24" style="font-weight: 600;flex-shrink: 0;">商家地址：</text>
				<text class="font-999-24">长沙市天心区城南路街道芙蓉中路二段188号贺龙体育场5039-5042房-858</text>
			</view>
			<view class="row-container-top" style="width: 100%;margin-top: 10rpx;">
				<text class="font-333-24" style="font-weight: 600;flex-shrink: 0;">主营特色：</text>
				<text class="font-999-24">避孕套，飞机杯，情趣内衣</text>
			</view>
			<view class="row-container-top" style="width: 100%;margin-top: 10rpx;">
				<text class="font-333-24" style="font-weight: 600;flex-shrink: 0;">活动范围：</text>
				<text class="font-999-24">本店通用</text>
			</view>
			
			<view class="row-container" style="width: 100%;height: 104rpx;">
				<view class="row-container-center" style="width: 50%;height: 100%;" @click="clickAdvice">
					<image class="btn-ic" src="../../static/index/ic_question.png"></image>
					<text class="font-333-26" style="font-weight: 600;">问题及建议</text>
				</view>
				<view class="btn-divider"></view>
				<view class="row-container-center" style="width: 50%;height: 100%;">
					<image class="btn-ic" src="../../static/index/ic_check_delivery.png"></image>
					<text class="font-333-26" style="font-weight: 600;">查看可否配送</text>
				</view>
			</view>
			
			<!-- 会员升级 -->
			<view class="member-hint" @click="clickUpdateMember">
				<image class="member-bg" src="../../static/index/bg_member_hint.png"></image>
				<text class="font-fff5dd-28" style="font-weight: 600;margin-left: 20rpx;z-index: 20;">您还不是星会员，升级会员每单多返2元</text>
				<text class="update">升级</text>
			</view>
			
			<view class="chosen-act-box" style="background: #F5F5F5;border: #EBEBEB solid 1rpx;">
				<view class="column-container" style="height: 100%;">
					<view class="other-act-box">
						<image class="other-act-bg" src="../../static/index/bg_other_act.png"></image>
						<text class="font-333-22" style="z-index: 30;">活动(一)</text>
					</view>
					<text class="font-333-28" style="margin-top: 10rpx;margin-left: 20rpx;font-weight: 600;">不需报告，请勿评论</text>
					<text class="font-666-24" style="margin-top: 4rpx;margin-left: 20rpx;">非会员，付 55 返 28，还有1份</text>
					<text class="font-666-24" style="margin-top: 4rpx;margin-left: 20rpx;">开抢时间: 00:00~23:59</text>
				</view>
				<text class="switch-act">抢此名额</text>
			</view>
			
			<view class="chosen-act-box">
				<view class="column-container" style="height: 100%;">
					<image class="current-act" src="../../static/index/ic_current_act.png"></image>
					<text class="font-b76024-28" style="margin-top: 10rpx;margin-left: 20rpx;">需品鉴报告(5星好评，拍照评论)</text>
					<text class="font-c68457-24" style="margin-top: 4rpx;margin-left: 20rpx;">非会员，付 55 返 28，还有1份</text>
					<text class="font-c68457-24" style="margin-top: 4rpx;margin-left: 20rpx;">开抢时间: 00:00~23:59</text>
				</view>
				<view class="chosen-flag-box">
					<image class="chosen-flag-ic" src="../../static/index/ic_chosen_act.png"></image>
					<text class="font-ffdbbb-24" style="font-weight: 600;">已选择</text>
				</view>
			</view>
		</view>
		
		<!-- 指定餐品 -->
		<view class="info-box">
			<text class="font-ff621f-28" style="font-weight: 600;">限定套餐：螺蛳粉小碗</text>
			<image class="meal-img" src="../../static/index/ic_meal.png"></image>
		</view>
		
		
		
		<!-- 分享邀请 -->
		<view class="info-box">
			<view class="row-container-row-between" style="width: 100%;">
				<view class="column-container">
					<text class="font-333-28" style="font-weight: 600;">分享赚钱，朋友省钱您赚钱</text>
					<image class="share-avatar" src="../../static/index/bg_share_avatar.png"></image>
				</view>
				<text class="invite-btn">立即邀请</text>
			</view>
		</view>
		
		<!--  加群 -->
		<view class="info-box">
			<view class="row-container-row-between" style="width: 100%;">
				<view class="row-container">
					<image class="group-img" src="../../static/index/ic_group.png"></image>
					<view class="column-container">
						<text class="font-333-28" style="font-weight: 600;">天心·霸王餐福利群</text>
						<text class="font-999-24" style="margin-top: 4rpx;">优质霸王餐活动群内优先推送</text>
						<view class="row-container" style="margin-top: 4rpx;">
							<text class="font-999-24">已有</text>
							<text class="font-333-24" style="font-weight: 600;margin-left: 5rpx;margin-right: 5rpx;">1000+</text>
							<text class="font-999-24">人加入</text>
						</view>
					</view>
				</view>
				<text class="invite-btn">添加</text>
			</view>
		</view>
		
		<!-- 领取步骤 -->
		<view class="info-box">
			<view class="row-container-row-between">
				<text class="font-333-32" style="font-weight: 600;">领餐补步骤</text>
				<text class="font-999-24">如有疑问请咨询客服</text>
			</view>
			<view class="step-box">
				<view class="column-container-row-center" style="position: relative;margin-top: 10rpx;">
					<image class="step-line" src="../../static/index/ic_step_line.png"></image>
					<image class="step-dot" src="../../static/index/ic_step_yellow.png"></image>
					<image class="step-dot" src="../../static/index/ic_step_yellow.png" style="margin-top: 90rpx;"></image>
					<image class="step-dot" src="../../static/index/ic_step_yellow.png" style="margin-top: 90rpx;"></image>
					<image class="step-dot" src="../../static/index/ic_step_yellow.png" style="margin-top: 90rpx;"></image>
					<image class="step-dot" src="../../static/index/ic_step_yellow.png" style="margin-top: 90rpx;"></image>
				</view>
				<view class="column-container" style="margin-left: 24rpx;">
					<view class="column-container">
						<text class="step-title">第1步：抢餐补名额</text>
						<text class="step-content">每天名额有限，先到先得</text>
					</view>
					<view class="column-container" style="margin-top: 28rpx;">
						<text class="step-title">第2步：领取美团/饿了么红包</text>
						<text class="step-content">领取大额会员红包，让您省上加省</text>
					</view>
					<view class="column-container" style="margin-top: 28rpx;">
						<text class="step-title">第3步：立即到美团团购平台下单</text>
						<text class="step-content">直接跳转美团团购下单，或打开美团团购APP搜索店名下单偕可</text>
					</view>
					<view class="column-container" style="margin-top: 28rpx;">
						<text class="step-title">第4步：在2天内提交订单编号到本平台</text>
						<text class="step-content">须在2天内提交订单编号，否则名额作废，无返现</text>
					</view>
					<view class="column-container" style="margin-top: 28rpx;">
						<text class="step-title">第5步：提交订单后，12小时内将收到微信红包</text>
						<text class="step-content">最迟12小时内，平台审核后，会发微信红包给您</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 注意事项 -->
		<view class="info-box">
			<text class="font-333-32" style="font-weight: 600;">注意事项</text>
			<text class="font-666-28" style="margin-top: 20rpx;line-height: 39rpx;">1、申请全额退款或理赔订单请放弃名额，不可敷衍内容、图片及与餐品无关内容反馈，并且不可删除评价。</text>
			<text class="font-666-28" style="margin-top: 20rpx;line-height: 39rpx;">2、本平台活动与商家品鉴卡不同享，随订单购买外卖平台会员、会员加量包、超值优惠券、准时宝等属于支付给外卖平台的费用，不计入实付金额。</text>
			<text class="font-666-28" style="margin-top: 20rpx;line-height: 39rpx;">3、除饮品店、超市以外，任何店铺仅可随主食点一瓶酒水饮料。</text>
			<text class="font-666-28" style="margin-top: 20rpx;line-height: 39rpx;">4、禁止在外卖平台询问商家本平台活动，有问题联系客服餐品问题可联系商家沟通</text>
			<text class="font-666-28" style="margin-top: 20rpx;line-height: 39rpx;">5、活动需满足商家要求的实付金额，可以用红包和优惠券，用完后满足实付金额就行</text>
		</view>
		
		<!-- 底部 -->
		<view class="bottom-box">
			<view class="bottom-btn">
				<image class="bottom-ic" src="../../static/common/ic_back_home.png"></image>
				<text class="font-333-22" style="font-weight: 600;">首页</text>
			</view>
			<view class="bottom-btn">
				<image class="bottom-ic" src="../../static/common/ic_service.png"></image>
				<text class="font-333-22" style="font-weight: 600;">客服</text>
			</view>
			<text class="confirm-btn" @click="handleBuy">第一步: 抢名额（付55返28）</text>
		</view>
		
		<view class="row-container" style="width: 100%;height: 100%;">
			<MemberWindow ref="memberWindowRef"></MemberWindow>
		</view>
		<view class="row-container" style="width: 100%;height: 100%;">
			<AdviceWindow  ref="adviceWindowRef"></AdviceWindow>
		</view>
		<view class="row-container" style="width: 100%;height: 100%;">
			<JoinSuccessWindow ref="joinSuccessWindowRef"></JoinSuccessWindow>
		</view>
		
	</view>
</template>

<script>
	import MemberWindow from '../../components/MemberWindow.vue'
	import AdviceWindow from '../../components/AdviceWindow.vue'
	import JoinSuccessWindow from '../../components/JoinSuccessWindow.vue'
	
	export default {
		data() {
			return {
				
			}
		},
		
		components:{
			MemberWindow,
			AdviceWindow,
			JoinSuccessWindow
		},	
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			clickUpdateMember(){
				if (this.$refs.memberWindowRef){
					this.$refs.memberWindowRef.showMemberWindow = true
				}
			},
			
			clickAdvice(){
				if (this.$refs.adviceWindowRef){
					this.$refs.adviceWindowRef.showAdviceWindow = true
				}
			},
			
			//点击抢单
			handleBuy(){
				if (this.$refs.joinSuccessWindowRef){
					this.$refs.joinSuccessWindowRef.showJoinSuccessWindow = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.head-img-container{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 330rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		
		.head-img{
			width: 100%;
			height: 330rpx;
		}
		
		.head-img-shadow{
			width: 100%;
			height: 330rpx;
			background: rgba(0, 0, 0, 0.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 11;
		}
	}
	
	.title-container{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 88rpx;
		margin-top: 100rpx;
		z-index: 40;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			padding: 0rpx 22rpx;
			position: absolute;
			left: 0rpx;
		}
	}
	
	.info-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 108rpx);
		background: white;
		border-radius: 16rpx;
		margin: 0rpx 30rpx 20rpx 30rpx; 
		padding: 24rpx;
		z-index: 30;
		
		.act-img{
			width: 133rpx;
			height: 133rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
		}
		
		.act-name{
			color: #333333;
			font-weight: 600;
			font-size: 32rpx;
			margin-right: 30rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex-shrink: 0;
		}
		
		.copy-name{
			padding: 3rpx 16rpx;
			background: #FFD100;
			border-radius: 8rpx;
			color: #333333;
			font-size: 24rpx;
			font-weight: 600;
			flex-shrink: 0;
		}
		
		.brand-tag{
			height: 38rpx;
			margin-top: 8rpx;
			margin-bottom: 8rpx;
		}
		
		.btn-divider{
			width: 1rpx;
			height: 24rpx;
			background: #A5A5A5;
		}
		
		.btn-ic{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
		
		.member-hint{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 78rpx;
			position: relative;
			
			.member-bg{
				width: 100%;
				height: 100%;
				position: absolute;
			}
			
			.update{
				background: linear-gradient(90.56deg, #FFFCEB 0.45%, #FFD6B9 99.51%);
				color: #E9534A;
				font-size: 24rpx;
				padding: 4rpx 17rpx;
				font-weight: 600;
				margin-right: 20rpx;
				z-index: 20;
				border-radius: 30rpx;
			}
		}
		
		.chosen-act-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 185rpx;
			position: relative;
			border-radius: 16rpx;
			border: #EEC4A6 solid 1rpx;
			background: linear-gradient(90deg, #FFF6EE 0%, #FFECDA 100%);
			margin-top: 20rpx;
			
			.other-act-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 121rpx;
				height: 42rpx;
				position: relative;
				
				.other-act-bg{
					width: 100%;
					height: 100%;
					position: absolute;
				}
			}
			
			.switch-act{
				color: #333333;
				font-size: 24rpx;
				padding: 11rpx 19rpx;
				margin-right: 20rpx;
				border: #333333 solid 1rpx;
				border-radius: 30rpx;
			}
			
			.current-act{
				width: 128rpx;
				height: 42rpx;
			}
			
			.chosen-flag-box{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				padding: 11rpx 16rpx;
				background: linear-gradient(90deg, #443323 0%, #282421 100%);
				border-radius: 30rpx;
				margin-right: 24rpx;
				
				.chosen-flag-ic{
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}
			}
			
		}
		
		.share-avatar{
			width: 448rpx;
			height: 64rpx;
			margin-top: 16rpx;
		}
		
		.invite-btn{
			padding: 11rpx 26rpx;
			background: #FFD100;
			border-radius: 32rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 600;
		}
		
		.group-img{
			width: 115rpx;
			height: 115rpx;
			margin-right: 20rpx;
		}
		
		.step-box{
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			width: 100%;
			margin-top: 20rpx;
			background: white;
			border-radius: 16rpx;
			
			.step-dot{
				width: 20rpx;
				height: 20rpx;
				z-index: 20;
			}
			
			.step-line{
				width: 2rpx;
				height: 479rpx;
				position: absolute;
				top: 20rpx;
			}
			
			.step-title{
				color: #333333;
				font-size: 28rpx;
				line-height: 39rpx;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.step-content{
				color: #999999;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
		
		.meal-img{
			width: 100%;
			height: 214rpx;
			margin-top: 16rpx;
		}
		
		
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 52rpx);
		height: 120rpx;
		background: white;
		position: fixed;
		bottom: 0rpx;
		padding-left: 22rpx;
		padding-right: 30rpx;
		z-index: 100;
		
		.bottom-btn{
			padding: 0rpx 22rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.bottom-ic{
				width: 38rpx;
				height: 38rpx;
				margin-bottom: 8rpx;
			}
			
		}
		
		.confirm-btn{
			flex-grow: 1;
			height: 88rpx;
			background: #FFD100;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			margin-left: 7rpx;
		}
		
	}
	
	
</style>
